<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='600px' @close="closeGetData">
        <div class="flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">消耗详情</span>
                <span class="icon_btn icon_btn_32"><img src="../../assets/img/close_check.svg" alt="" @click="closeGetData"></span>
            </div>
            <div class="pd_20 no_pb">
                <div class="step_box flexbox flexcenter flexbetween">
                    <div>
                        客户/投放渠道
                        <span>{{baseInfo.brand_name}}-{{filters.chanelName2(queryInfo.channel)}}{{filters.sceneFilter(queryInfo.business_scene)}}</span>
                    </div>
                    <div>
                        总消耗
                        <span class="cost_number">{{baseInfo.stat_cost}}</span>
                    </div>
                </div>
                <div class="mt_20 font_14 color_01">日度消耗</div>
            </div>
            <div class="demand_center flex">
                <el-table :data="tableData" class="com_table" height="100%">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="batch_num" label="日期" min-width="110">
                    </el-table-column>
                    <el-table-column prop="free_cost" label="随心推" width="150" v-if="queryInfo.channel==1" key="qc">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter popper_hover">
                                {{scope.row.free_cost}}
                                <el-popover placement="top" width="160" @show="showFree(scope.row.free_cost)">
                                    <el-input v-model="freeValue" placeholder="" size="small"></el-input>
                                    <div style="text-align: right; margin-top: 10px">
                                        <el-button size="mini" type="text" @click="hidePop">取消</el-button>
                                        <el-button type="primary" size="mini" @click="editFree(scope.row)">确定</el-button>
                                    </div>
                                    <img src="../../assets/img/edit_icon2.svg" alt="" class="icon_btn icon_btn_width" slot="reference">
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="消耗" width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter popper_hover">
                                {{scope.row.stat_cost}}
                                <el-popover placement="top" width="160" @show="showCost(scope.row.stat_cost)">
                                    <el-input v-model="costValue" placeholder="" size="small"></el-input>
                                    <div style="text-align: right; margin-top: 10px">
                                        <el-button size="mini" type="text" @click="hidePop">取消</el-button>
                                        <el-button type="primary" size="mini" @click="editCost(scope.row)">确定</el-button>
                                    </div>
                                    <img src="../../assets/img/edit_icon2.svg" alt="" class="icon_btn icon_btn_width" slot="reference">
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import filters from "../../assets/js/filters";
import monthdate from "../../assets/js/getmonth";
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            freeValue: "",
            costValue: "",
            baseInfo: {
                brand_name: "",
                stat_cost: "",
            },
            queryInfo: {
                year: this.$route.query.year,
                month: this.$route.query.month,
                author: this.$route.query.author,
                channel: "",
                business_scene: "",
                brand_id: "",
            },
            tableData: [],
        };
    },
    created() {},
    methods: {
        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/cost/costDaytime",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.baseInfo.stat_cost = res.data.total_cost;
                this.getTime(
                    res.data.list,
                    this.$route.query.year,
                    this.$route.query.month
                );
            }
        },

        // 获取日期
        getTime(data, year, month) {
            this.tableData = [];
            let day = monthdate.currentMonthDays(year, month);
            for (let i in day) {
                let date = data
                    .filter((item) => {
                        return item.batch_num == day[i];
                    })
                    .map((item) => {
                        return item.batch_num;
                    })
                    .toString();
                let val = data.filter((item) => {
                    return item.batch_num == day[i];
                })[0];
                if (day[i] == date) {
                    this.tableData.push(val);
                } else {
                    this.tableData.push({
                        batch_num: day[i],
                        free_cost: "0.00",
                        stat_cost: "0.00",
                        total_cost: "0.00",
                    });
                }
            }
        },

        showFree(val) {
            this.freeValue = val;
        },

        showCost(val) {
            this.costValue = val;
        },

        hidePop() {
            document.body.click();
        },

        //填写随心推
        async editFree(row) {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/cost/editCost",
                {
                    channel: this.queryInfo.channel,
                    business_scene: this.queryInfo.business_scene,
                    brand_id: this.queryInfo.brand_id,
                    batch_num: row.batch_num,
                    author: this.$route.query.author,
                    free_cost: this.freeValue,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.hidePop();
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.getDataList();
            }
        },

        //填写消耗
        async editCost(row) {
            this.loading = true;
            let url = this.queryInfo.channel==2?'launch/cost/editCost':'launch/cost/costDaytimeEdit'
            const { data: res } = await this.$http.post(
                url,
                {
                    channel: this.queryInfo.channel,
                    business_scene: this.queryInfo.business_scene,
                    brand_id: this.queryInfo.brand_id,
                    batch_num: row.batch_num,
                    author: this.$route.query.author,
                    stat_cost: this.costValue,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.hidePop();
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.getDataList();
            }
        },

        // 关闭详情
        closeGetData() {
            this.dialogVisible = false;
            this.$emit("getDataList");
        },
    },
    components: {},
};
</script>
<style scoped>
.step_box {
    height: 48px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
    padding: 0 20px;
    font-size: 14px;
    color: #616c85;
}
.step_box span {
    margin-left: 8px;
    color: #17233d;
}
.step_box .cost_number {
    font-family: D-DIN;
    font-weight: bold;
}
.icon_btn_width {
    width: 20px;
    height: 20px;
}
.no_pb {
    padding-bottom: 0;
}
.demand_center {
    padding-top: 12px;
}
</style>


